﻿$(function() {
    /**
	 * 功率曲线
	 * */
    var dayline1 = echarts.init(document.getElementById('dayline1'));
    optionline = {
        tooltip: {
            trigger: 'axis'
        },
        backgroundColor: '#e0e0e0',
        grid: {
            top: '10%',
            left: '4%',
            right: '4%',
            bottom: '20%',
            containLabel: true
        },
        legend: {
            bottom: '30',
            data: ['功率']
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [],
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
                show: false
            }
        },
        dataZoom: {
            type: 'slider',
            start: 0,
            end: 100,
            bottom: 1
        },
        series: [{
            name: '功率',
            type: 'line',
            smooth: true,
            sampling: 'average',
            itemStyle: {
                normal: {
                    color: 'rgb(255, 70, 131)'
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgb(255, 158, 68)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(255, 70, 131)'
                    }])
                }
            },
            data: []
        }]
    };
    dayline1.setOption(optionline);

    /**
     * 超载报警
     * */
    var daybar2 = echarts.init(document.getElementById('daybar2'));
    optionBar2 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '10%',
            left: '5%',
            right: '6%',
            bottom: '20%',
            containLabel: true
        },
        legend: {
            bottom: '30',
            data: ['报警时长']
        },
        backgroundColor: '#e0e0e0',
        color:['#cc3f44'],
        xAxis: {
            type: 'category',
            nameGap: 5,
            data: [],
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            name: '报警时长(分钟)',
            axisLabel: {
                formatter: '{value}'
            },
            splitLine: {
                show: false
            }
        },
        dataZoom: {
            type: 'slider',
            start: 0,
            end: 100,
            bottom: 1
        },
        series: [{
            name: '报警时长',
            type: 'bar',
            barMaxWidth: 30,
            data: []
        }]
    };
    daybar2.setOption(optionBar2);

    /**
     * 报警时长
     * */
    var daypie3 = echarts.init(document.getElementById('daypie3'));
    optionpie = {
        tooltip: {
            trigger: 'item',
            formatter: "{b}: {c}分钟 ({d}%)<br/>"
        },
        legend: {
            orient: 'horizontal',
            bottom: '30',
            data: []
        },
        backgroundColor: '#e0e0e0',
        color:['#00b19d','#ff6264','#f7aa47','#999933','#003366'],
        series: [{
            type: 'pie',
            radius: '53%',
            center: ['50%', '50%'],
            data: [],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'outside',
                    formatter: "{b}:{c}分钟"
                }
            },
            labelLine: {
                normal: {
                    show: true,
                    length: 20,
                    length2: 10
                }
            }
        }]
    };
    daypie3.setOption(optionpie);

    /**
     * 报警占满载比重
     * */
    var daypie4 = echarts.init(document.getElementById('daypie4'));
    optionpie4 = {
        tooltip: {
            formatter: "{b} : {c}%"
        },
        backgroundColor: '#e0e0e0',
        legend: {
            bottom: '30',
            data: ['报警占满载比重']
        },
        series: [{
            name: '报警占满载比重',
            type: 'gauge',
            radius: "60%",
            startAngle: 140,
            endAngle: -140,
            clockwise: true,
            min: 0,
            max: 100,
            splitNumber: 10,
            //分割段数
            axisTick: { //刻度
                show: true,
                splitNumber: 5
            },
            axisLine: { //轴线
                show: true,
                lineStyle: {
                    color: [[0.2, '#27dd27'], [0.4, '#d4a411'], [0.8, '#a4c2f4'], [1, '#e86767']],
                    width: 30
                }
            },
            axisTick: { // 坐标轴小标记
                show: true,
                // 属性show控制显示与否，默认不显示
                splitNumber: 5,
                // 每份split细分多少段
                length: 8,
                // 属性length控制线长
                lineStyle: { // 属性lineStyle控制线条样式
                    color: '#eee',
                    width: 1,
                    type: 'solid'
                }
            },
            axisLabel: { // 坐标轴文本标签
                show: true,
                formatter: function(v) {
                    switch (v + '') {
                    case '10':
                        return '弱';
                    case '30':
                        return '低';
                    case '60':
                        return '中';
                    case '90':
                        return '高';
                    default:
                        return '';
                    }
                },
                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: '#333'
                }
            },
            pointer: {
                length: '80%',
                width: 8,
                color: 'auto'
            },
            splitLine: { // 分隔线
                show: true,
                // 默认显示，属性show控制显示与否
                length: 30,
                // 属性length控制线长
                lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                    color: '#eee',
                    width: 2,
                    type: 'solid'
                }
            },
            title: {
                show: true,
                offsetCenter: ['-65%', -10],
                // x, y，单位px
                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: '#333',
                    fontSize: 15
                }
            },
            detail: {
                show: true,
                backgroundColor: 'rgba(0,0,0,0)',
                borderWidth: 0,
                borderColor: '#ccc',
                width: 100,
                height: 40,
                offsetCenter: ['-60%', 10],
                // x, y，单位px
                formatter: '{value}%',
                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: 'auto',
                    fontSize: 20
                }
            },
            data: [{
                value: 0
            }]
        }]
    };
    daypie4.setOption(optionpie4);

    /**
     * 初始化
     * */
    var vm = new Vue({
        el: '#itemData',
        data: {
            item: []
        }
    });
    var lineId = 0;
    var equId = 0;
    $('#ss').slider('setValue', parseInt(moment().format("x")));
    var getsliderTime = $('#ss').slider('getValue');
    var time = moment(getsliderTime).format("YYYY-MM-DD");
    getData();
    function getData() {
        $.post(basePath + "/single/singleDay/power.json", {
            "lineId": lineId,
            "equId": equId,
            belongDate: time
        },
        function(res) {
            vm.$set('item', res);
            if (res.success) {
                dayline1.setOption({
                    xAxis: {
                        data: res.powerHour //['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00','24:00'],
                    },
                    series: [{
                        name: '功率',
                        data: res.power //[10,45,15,48,56,25,14,48,17,48,11,48,68,32,59,58,48,47,15,26,14,58,26,50]
                    }]
                });
                daybar2.setOption({
                    xAxis: {
                        data: res.xTimes
                    },
                    series: [{
                        data: res.yValue
                    }]
                });
                daypie3.setOption({
                    legend: {
                        data: res.pieLendge
                    },
                    series: [{
                        data: res.pieValue
                    }]
                });
                daypie4.setOption({
                    series: [{
                        data: [{
                            value: res.rate
                        }]
                    }]
                });
            } else {
                alert(res.msg);
            }
        });
    }

    /**
     * slider滑动事件
     * */
    $('#ss').slider({
        onComplete: function(value) { //滑块值改变时触发
            time = moment(value).format('YYYY-MM-DD');
            getData();
        }
    });

    /**
     * 自定义时间按钮的点击事件
     * */
    $("#defineTime").click(function() {
        var mePanel = $('#defineTimeWin');
        mePanel.dialog('open');
    });

    /**
	  * 切换设备的点击事件
	  * */
    var mePanel = $('#switchEquip');
    $("#linetree").tree({
        onClick: function(node) {
            if (node.url) {
                lineId = node.id;
                var lineGrid = $('#lines_data');
                lineGrid.datagrid('load', {
                    lineId: node.id
                });
                lineGrid.datagrid('getPanel').panel('setTitle', node.text);
            }
        }
    });
    $('#lines_data').datagrid({
        //双击设备时，根据选中设备刷新
        onDblClickRow: function(rowIndex, rowData) {
            lineId = rowData.lineId;
            equId = rowData.id;
            time = moment($('#ss').slider('getValue')).format("YYYY-MM-DD");
            getData();
            mePanel.dialog('close');
        }
    });
    $("#switchEquipOK").click(function() {
        var row = $('#lines_data').datagrid('getSelected');
        if (row) {
            lineId = row.lineId;
            equId = row.id;
            time = moment($('#ss').slider('getValue')).format("YYYY-MM-DD");
            getData();
            $('#switchEquip').dialog('close');
        } else {
            $.messager.alert({
                showSpeed: 100,
                title: '消息提示',
                msg: '请选择一条设备记录!',
                timeout: 3000
            });
        }
    });

});